<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, toRefs, onMounted, watch } from 'vue'
// type arrFun = (u: string) => Array<number>
const getListApi = (uid: string): any => { // 定义函数参数类型和返回值类型
  return new Promise((resolve) => {
    setTimeout(() => {
      console.log('uid', uid)
      resolve([1, 2, 3])
    }, 200)
  })
}
export default defineComponent({
  name: 'HelloWorld',
  props: {
    msg: String
  },
  /**
   * composition-api 实际应用~
   */
  setup (props) {
    // 创建对props中msg的响应式引用
    const { msg } = toRefs(props)
    // 定义一个响应式的列表
    const list = ref([])
    const getList = async () => {
      list.value = await getListApi(msg.value as string)
      console.log('getList: ', list.value)
    }

    // 生命周期钩子函数执行时 
    onMounted(getList)

    // 监听props的msg属性【参数】变化
    watch(msg, getList)

    return {
      list,
      getList
    }
  }
})
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="stylus">
h3
  margin 40px 0 0

ul
  list-style-type none
  padding 0

li
  display inline-block
  margin 0 10px

a
  color #42b983
</style>
